<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		body,html{
			height: 100%;
		}
			.all{
				width: 100%;
				height: 30%;
				margin-left: 200px;
				position: relative;
			}
			button {
				overflow: hidden;
				position: absolute;
				width: 100px;
				height: 40px;
				background-color: skyblue;
				border: 1px solid skyblue;
				color: white;
				font-size: 30px;
				font-family: "微软雅黑";
				font-weight: 800;
			}
			
		</style>
	</head>

	<body>
		<div class="all">
			<button>1</button>
			<button>2</button>
			<button>3</button>
			<button>4</button>
			<button>5</button>
			<button>6</button>
			<button>7</button>
			<button>8</button>
			<button>9</button>
			<button>10</button>
		</div>
		<p>pop() 删除数组的最后一个元素 并返回最后一个元素 push() 在数组末尾添加元素 可以每次添加多个元素 并返回更新后的数组长度 unshift() 在数组的开头添加元素 不返回值 shift() 在数组的开头删除元素 返回删除的值</p>
		<p>事件绑定和普通事件的区别:
			<br /> 普通添加事件 只能添加一个相同的事件 如果添加多个最后的会覆盖前面的事件 事件绑定可以绑定多个并且事件触发后按绑定顺序来执行; addEventListener 不兼容低版本ie如果使用需要解决兼容的问题;
		</p>
		<p>ajax请求的时候get和post方式的区别?
			<br /> 使用Get请求时,参数在URL中显示,而使用Post方式,则不会显示出来 使用Get请求发送数据量小,Post请求发送数据量大
		</p>
		<p>
			call和apply的区别? call可以用来代替另一个对象调用一个方法 call方法可以将一个函数的对象上下文从出事的上下文改变为由thisObj指定的新对象;如果没有thisObj用Global对象作为thisObj
			<br /> apply如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。 如果没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用作 thisObj， 并且无法被传递任何参数。
		</p>
		<p>
			事件委托;
			<br /> 利用冒泡的原理把事件加到父级上,触发执行效果; 1.提高性能 2.新添加的元素会有之前的事件
		</p>
		<script type="text/javascript">
			//方法二
			var buttonS = document.querySelectorAll("button");
			var all = document.querySelector(".all");

			for(var j = 0; j < buttonS.length; j++) {
				buttonS[j].style.left = (buttonS[j].offsetWidth + 20) * j + "px";
				buttonS[j].style.top = 100 + "px";
			}
			all.onmouseover=function(ev){
				var ev = ev||window.event;
				var target = ev.target||ev.srcElement;
				if(target.nodeName.toLowerCase() == "button"){
					target.style.backgroundColor = "black";
					target.style.border = "1px solid black";					
				}
			}
			all.onmouseout=function(ev){
				var ev = ev||window.event;
				var target = ev.target||ev.srcElement;
				if(target.nodeName.toLowerCase() == "button"){
					target.style.backgroundColor = "skyblue";
					target.style.border = "1px solid skyblue";
				}
			}
			all.onmousedown = function(ev){
				var ev = ev||window.event;
				var target = ev.target||ev.srcElement;
				if(target.nodeName.toLowerCase()== "button"){
					var thenX = ev.clientX,
					thenY = ev.clientY,
					chaX = target.offsetLeft - thenX,
					chaY = target.offsetTop - thenY;
					window.onmousemove = function(ev){
						var ev = ev||window.event;
						var nowX = ev.clientX,nowY = ev.clientY;
							target.style.left = nowX + chaX + "px";
							target.style.top = nowY + chaY + "px";
							for(var i=0;i<buttonS.length;i++){
								if(i != (target.innerHTML-1)){
									if(check(target,buttonS[i])){
										var aa = buttonS.length;
										for(var i=0;i<aa;i++){
											all.removeChild(buttonS[0]);
										}
										for(var k=0;k<aa;k++){
											var button0 = document.createElement("button");
											if(k == target.innerHTML-1){
												button0.innerHTML = i;
											}else if(k == i){
												button0.innerHTML = target.innerHTML;
											}else{
												button0.innerHTML = k;
											}
											all.appendChild(button0);
										}
										buttonS = document.querySelectorAll("button");
									}
								}
							}
					}
				}
			}
			all.onmouseup=function(){
				window.onmousemove="";
			}

		
		
		
		
		
		
		
		
		
		
		//方法一 失败
//			var buttonS = document.querySelectorAll("button");
//			var all = document.querySelector(".all");
//
//			for(var j = 0; j < buttonS.length; j++) {
//				buttonS[j].style.left = (buttonS[j].offsetWidth + 20) * j + "px";
//				buttonS[j].style.top = 100 + "px";
//			}
//			aa(buttonS);
//
//			function aa(Arr) {
//				for(var i = 0; i < Arr.length; i++) {
//					Arr[i].index = i;
//					Arr[i].onmouseover = function(k) {
//						return function() {
//							Arr[k].style.backgroundColor = "black";
//							Arr[k].style.border = "1px solid black";
//						}
//					}(i);
//					Arr[i].onmouseout = function(k) {
//						return function() {
//							Arr[k].style.backgroundColor = "skyblue";
//							Arr[k].style.border = "1px solid skyblue";
//						}
//					}(i);
//					Arr[i].onmousedown = function(ev) {
//						var ev = ev || window.event;
//						var thenX = ev.clientX;
//						var thenY = ev.clientY;
//						var chaX = this.offsetLeft - thenX;
//						var chaY = this.offsetTop - thenY;
//						var aa = this.index;
//						var thenLeft = this.offsetLeft;
//						window.onmousemove = function(eve) {
//							var eve = eve || window.event;
//							var nowX = eve.clientX;
//							var nowY = eve.clientY;
//							Arr[aa].style.left = nowX + chaX + "px";
//							Arr[aa].style.top = nowY + chaY + "px";
//							for(var i = 0; i < Arr.length; i++) {
//								if(i == aa) {
//									continue;
//								} else {
//									if(check(Arr[aa], Arr[i])) {
//										if(i == Arr.length - 1) {
//											all.removeChild(Arr[aa]);
//											var button0 = document.createElement("button");
//											button0.innerHTML = aa + 1;
//											all.appendChild(button0);
//										} else {
//											all.removeChild(Arr[aa]);
//											var button0 = document.createElement("button");
//											button0.innerHTML = aa + 1;
//											if(aa < i) {
//												all.insertBefore(button0, Arr[i + 1]);
//											} else if(aa > i) {
//												all.insertBefore(button0, Arr[i]);
//											}
//										}
//										var buttonN = document.querySelectorAll("button");
//										for(var j = 0; j < buttonN.length; j++) {
//											buttonN[j].style.left = (buttonN[j].offsetWidth + 20) * j + "px";
//											buttonN[j].style.top = 100 + "px";
//										}
//									}
//								}
//							}
//						}
//					}
//					buttonS[i].onmouseup = function() {
//						window.onmousemove = "";
//					}
//				}
//			}
//
//			//检测碰撞
			function check(obj1, obj2) {
				var disX = (obj1.offsetWidth + obj2.offsetWidth) / 2;
				var disY = (obj2.offsetHeight + obj2.offsetHeight) / 2;
				var centerX = Math.abs((obj1.offsetLeft + (obj1.offsetWidth / 2)) - (obj2.offsetLeft + (obj2.offsetWidth) / 2));
				var centerY = Math.abs((obj1.offsetTop + (obj1.offsetHeight / 2)) - (obj2.offsetTop + (obj2.offsetHeight) / 2));
				console.log()
				if(centerX < disX && centerY < disY) {
					return true;
				} else {
					return false;
				}
			}
		</script>
	</body>

</html>